import { Button, Form, Input,Checkbox } from 'antd';
import React,{useState,useEffect} from 'react';
import services from '@/services/login/index' 
import { setRTP,getRTP,getPassword,getAccount,setPassword as setLocalPassword,setAccount } from '@/utils/index'
const LoginForm: React.FC<{onSubmit:(data:API.GoupListType[])=>void}> = ({onSubmit}) => {
    const [mobile,setMobile] = useState( getAccount()|| '')
    const [password,setPassword] = useState(getPassword()|| '')
    const [remember,setRemember] = useState(!!getRTP())
    const [loading,setLoading] = useState(false)
    const onFinish = async () => {
        setLoading(true)
        try {
            let res = await services.LoginController.getgroupList({mobile:mobile})
            res =  res.map((item)=>{
                return {
                    ...item,
                    mobile,password
                }
            })

            if(remember){
                setAccount(mobile)
                setLocalPassword(password)
            } else {
                setAccount('')
                setLocalPassword('')
            }

            onSubmit(res)
        } catch (error) {
            console.log('error',error)
        } finally {
            setLoading(false)
        }
        
    };
    useEffect(()=>{
        setRTP(remember)
    },[remember])
    return (
        
            <Form
                name="loginForm"
                initialValues={{ remember: true,mobile,password }}
                onFinish={onFinish}
                style={{ width: 300 }}
                layout='vertical'
            >
              
                <Form.Item
                    label={<span className='text-white'>账号名称</span>}
                    name="mobile"
                   
                    rules={[{ required: true, message: '请输入账号!' }]}
                >
                    <Input placeholder="账号名称" defaultValue={mobile}  size='large' onChange={(e)=>setMobile(e.target.value)} />
                </Form.Item>

                <Form.Item
                    label={<span className='text-white'>账号密码</span>}
                    name="password"
                    rules={[{ required: true, message: '请输入密码' }]}
                >
                    <Input.Password placeholder="密码" defaultValue={password}  size='large' onChange={(e)=>setPassword(e.target.value)}  />
                </Form.Item>
                <Form.Item
                    
                    
                >
                    <div >
                        <div>
                            <Checkbox checked={remember} onChange={(e)=>setRemember(e.target.checked)} >
                                <span className='text-white'>记住密码</span>
                            </Checkbox>
                        </div>
                    </div>
                </Form.Item>
                <Form.Item>
                    <Button type="primary" loading={loading} htmlType="submit" size='large' style={{ width: '100%' }}>
                        登录
                    </Button>
                </Form.Item>
                </Form>
       
    );
};

export default LoginForm;
